<template>
	<view class="container">
		<view class="header">
			<view class="title">
				章节练习
			</view>
			<image v-if="type==1" @tap="toggle(2)" src="https://q-api.guguzi.com/api/file/download/uTjXftCmNn_顺序播放.png" mode="" class="img"></image>
			<image v-else @tap="toggle(1)" src="https://q-api.guguzi.com/api/file/download/vKdKIED8il_随机.png" mode="" class="img"></image>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="num">
						{{index}}
					</view>
					<view class="name">
						概述
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="progress-container">
						    <view class="progress-bar" style="width: 43%;"></view>
						</view>
						<view class="">
							37/77
						</view>
						<view class="" style="margin: 0 10rpx;">
							正确率
						</view>
						<view class="">
							43%
						</view>
					</view>
					<view class="right">
						顺序练习
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		unref,
		toRaw,
		toRefs,
		nextTick
	} from 'vue'
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	import {
		$http,
		toLogin,
		timestampToDateTime
	} from "@/common"
	const type=ref(1)
	onLoad((options) => {
		
	})
	function toggle(val){
		type.value = val
	}
	const list = ref([
		{
			name:'概述',
			num1:37,
			num1:77,
			rate:43
		},
		{
			name:'空域',
			num1:37,
			num1:77,
			rate:43
		},
		{
			name:'法律法规',
			num1:37,
			num1:77,
			rate:43
		},
		{
			name:'系统组成',
			num1:37,
			num1:77,
			rate:78
		},
	])
</script>
<style lang="scss" scoped>
	.container {
		height: 100%;
		background-color: #F8F9FB;
		padding: 20rpx;
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			.title{
				font-size: 50rpx;
				font-weight: bold;
			}
			.img{
				width: 60rpx;
				height: 60rpx;
			}
		}
		.list{
			.item{
				margin-bottom: 46rpx;
				.top{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					.num{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						background-color: #1967E5;
						color: #fff;
						margin-right: 12rpx;
					}
					view{
						font-weight: bold;
					}
				}
				.bottom{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #778899;
					padding-left: 62rpx;
					.left{
						display: flex;
						align-items: center;
						.progress-container {
						    width: 200rpx; /* 容器宽度 */
							height: 10rpx;
						    background-color: #eee; /* 容器背景色 */
						    border-radius: 10rpx; /* 容器圆角 */
						    overflow: hidden; /* 确保子元素超出部分不显示 */
							margin-right: 10rpx;
						}
						 
						.progress-bar {
						    height: 10rpx; /* 进度条高度 */
						    background-color: #1967E5; /* 进度条颜色 */
						    border-radius: 10rpx; /* 进度条圆角 */
						    transition: width 0.4s ease-in-out; /* 宽度变化动画 */
						}
					}
					.right{
						width: 160rpx;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #EAF2FF;
						color: #1B92EF;
					}
				}
			}
		}
	}
</style>